import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import * as CONST from './../../const';
import * as Animated from 'react-native-animatable';

import {
    Press
} from './../../components';

interface TabItem {
    id?: string,
    label: string
}

interface Props {
    page: number,
    tabs: Array<TabItem>,
    onChange: Function
}

class TabHeader extends PureComponent<Props> {
    static defaultProps = {
        page: 0,
        tabs: [],
        onChange: () => null
    }

    get lineScrollStyle() {
        const {
            tabs,
            page,
        } = this.props;

        const left = (
            `${page / tabs.length * 100}%`
        )
        return [styles.lineScroll, {
            left: left,
            width: `${1 / tabs.length * 100}%`
        }]
    }

    _onTabChange = (i:number) => {
        const {
            onChange
        } = this.props;
        onChange(i)
    }

    render() {
        const {
            tabs,
            page
        } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.footer}>
                    <View style={styles.lineContainer}>
                        <Animated.View
                            delay={0}
                            transition="left"
                            style={this.lineScrollStyle}
                        >
                            <View style={styles.lineStyle}/>
                        </Animated.View>
                    </View>
                </View>
                <View style={styles.content}>
                    {tabs.map((item:any, i:number) => {
                        const textStyle = [styles.tabText];
                        if(page === i) {
                            textStyle.push(styles.tabActive)
                        }
                        const _node = (
                            <View>
                                <Text style={textStyle}>
                                    {item.label}
                                </Text>
                                {!!item.dotNum && (
                                    <View style={styles.dotStyle} />
                                )}
                            </View>
                        )
                        return (
                            <Press
                                key={i}
                                value={i}
                                children={_node}
                                style={styles.tabItem}
                                onPress={this._onTabChange}
                            />
                        )
                    })}
                </View>
            </View>
        )
    }
}


export default TabHeader;

const styles = StyleSheet.create({
    container: {
        height: 48
    },
    content: {
        height: `100%`,
        flexDirection: `row`,
        paddingHorizontal: 16
    },
    tabItem: {
        flex: 1,
        alignItems: `center`,
        justifyContent: `center`
    },
    tabText: {
        fontSize: 14,
        color: `#fff`
    },
    tabActive:{
      color:CONST.color
    },
    footer: {
        left: 0,
        bottom: 2,
        width: `100%`,
        position: `absolute`,
        paddingHorizontal: 20,

    },
    lineContainer: {
        height: 2
    },
    lineScroll: {
        height: `100%`,
        left: 0,
        alignItems: `center`,
        position: `absolute`
    },
    lineStyle: {
        width: `80%`,
        height: `100%`,
        borderRadius: 1,
        backgroundColor: CONST.color
    },
    wrapper:{
        backgroundColor: `#161823`
    },
    dotStyle:{
        width:6,
        height:6,
        top:-2,
        right:-10,
        borderRadius:3,
        position:`absolute`,
        backgroundColor:CONST.color
    }
}) as any;